<template>
  <div class="coupon">
    <top-bar :title="'我的优惠券'"/>
    <div class="content">
      <div class="coupon-items">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div :class="[item.type==2 ? 'bgStyle' : 'bgStyle_2']" class="styles"
                 v-for="item in couponList.list" :key="item.id">
              <div class="left">
                <div class="money">
                  <span>¥</span>
                  <span :class="fontSize(item.money)">{{ item.money }}</span>
                </div>
                <div class="couponName">
                  {{ item.type == 1 ? '游戏优惠券' : 'K金优惠券' }}
                </div>
              </div>
              <div class="center">
                <span>{{ item.title }}</span>
                <span>截止时间：{{ dateTransform(item.end_time, 'yyyy-MM-dd') }}</span>
                <span>{{ item.overlay_type == 0 ? '可与游戏内折扣叠加使用' : '不可与游戏内折扣叠加使用' }}</span>
              </div>
              <div class="draw right" @click="useCoupon(item)">
                使用
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from './topBar'
import * as api from '../../api'

export default {
  name: 'coupon',
  components: {
    topBar
  },
  data () {
    return {
      state: false,
      current: 1,
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
      couponList: {
        list: [],
        count: 0
      },
    }
  },
  computed: {},
  methods: {
    fontSize (item) {
      if (item < 1000) {
        return 'font_size_1'
      }
      if (item < 10000) {
        return 'font_size_2'
      }
      return 'font_size_3'
    },
    onLoad () {
      if (this.finished) {
        this.refreshing = false
        return
      }
      this.page++
      setTimeout(() => {
        this.getCouponList()
      }, 100)
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false
      this.loading = false
      this.page = 0
      this.onLoad()
    },
    getCouponList () {
      let obj = {
        page: this.page,
        offset: 20
      }
      api.getMyCouponList(obj, data => {
        if (obj.page != 1) {
          this.couponList.list = this.couponList.list.concat(data.list)
          this.couponList.count = data.count
        } else {
          this.couponList = data
        }
        if (this.couponList.list.length >= this.couponList.count) {
          this.finished = true
        }
        if (!this.finished && !data.count) {
          this.finished = true
        }
        this.refreshing = false
        this.loading = false
      })
    },
    useCoupon (item) {
      if (item.type == 1) {
        this.Toast('请在游戏内使用！', 1000)
        return
      }
      this.$router.push({path: '/me/gmpay'})
    },
  },
  created () {
    this.getCouponList()
  }
}
</script>

<style lang="scss" scoped>
.coupon {
  padding: 0.75rem 0.48rem;

  .content {
    margin-top: 0.47rem;

    .coupon-items::-webkit-scrollbar {
      width: 0 !important
    }

    .coupon-items {
      height: 8.5rem;
      overflow-x: hidden;
      overflow-y: scroll;

      .styles {
        display: flex;
        align-items: center;
        padding: 0 0.4rem 0 0.38rem;

        .left {
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 1.2rem;

          .money {
            display: flex;
            align-items: baseline;
            justify-content: center;

            > span:nth-child(1) {
              font-size: 0.32rem;
              font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
              font-weight: 800;
              color: #FF5832;
            }

            > span:nth-child(2) {
              margin-left: 0.05rem;
              font-family: SourceHanSansCN-Bold, SourceHanSansCN;
              font-weight: bold;
              color: #FF5832;
            }
          }
        }

        .center {
          flex: 1;
          display: flex;
          flex-direction: column;
          margin-left: 0.7rem;
          margin-top: 0.1rem;

          > span:nth-child(1) {
            font-size: 0.35rem;
            font-family: SourceHanSansCN-Bold, SourceHanSansCN;
            font-weight: bold;
            color: #181818;
          }

          > span:nth-child(2) {
            font-size: 0.27rem;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #666666;
            margin: 0.24rem 0;
          }

          > span:nth-child(3) {
            font-size: 0.29rem;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #666666;
          }
        }

        .couponName {
          font-size: 0.24rem;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #FF5832;
          margin-top: 0.29rem;
        }

        .right {
          width: 1.49rem;
          height: 0.67rem;
          border-radius: 0.33rem;
          font-size: 0.32rem;
          font-family: SourceHanSansCN-Medium, SourceHanSansCN;
          font-weight: 500;
          text-align: center;
          line-height: 0.67rem;
          margin-right: 0.35rem;
        }

        .draw {
          background: #FDF3E9;
          color: #FF5832;
        }
      }

      .bgStyle {
        margin-bottom: 0.3rem;
        width: 100%;
        height: 2.24rem;
        background: url("../../assets/images/personal_center/couponActive.png") no-repeat;
        background-size: 100% 100%;

        .left {
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 1.2rem;

          .money {
            display: flex;
            align-items: baseline;
            justify-content: center;

            > span:nth-child(1) {
              font-size: 0.32rem;
              font-weight: 800;
              color: #FDED75;
              text-shadow: 2px 5px 5px rgba(85, 16, 16, 0.36);
            }

            > span:nth-child(2) {
              margin-left: 0.05rem;
              font-weight: 800;
              color: #FDED75;
              text-shadow: 2px 5px 5px rgba(85, 16, 16, 0.36);
            }
          }
        }

        .center {
          margin-top: -0.1rem;

          > span:nth-child(1) {
            color: #FFFFFF;
          }

          > span:nth-child(2) {
            color: #FFF0F0;
          }

          > span:nth-child(3) {
            color: #FFF0F0;
          }
        }

        .couponName {
          font-size: 0.24rem;
          font-weight: bold;
          color: #FDED75;
          text-shadow: 2px 5px 5px rgba(85, 16, 16, 0.36);
          margin-top: 0.13rem;
        }
      }

      .bgStyle_2 {
        margin-bottom: 0.3rem;
        width: 100%;
        height: 2.24rem;
        background: url("../../assets/images/personal_center/coupon.png") no-repeat;
        background-size: 100% 100%;
      }
    }

    .font_size_1 {
      font-size: 0.64rem;
    }

    .font_size_2 {
      font-size: 0.54rem;
    }

    .font_size_3 {
      font-size: 0.44rem;
    }
  }

  /deep/ .van-list__finished-text, /deep/ .van-loading__text {
    font-size: 0.32rem;
    text-align: center;
    color: #999999;
  }
}
</style>
